<template>
  <view>
    <view class="topic-bg">
      <image
        src="https://i.loli.net/2020/11/25/7vdVk6LEBifnhDZ.png"
        lazy-load
        mode="widthFix"
      ></image>
    </view>
    <view v-if="type == '验证码'">
      <view class="login-input">
        <view class="name">
          <input
            type="text"
            placeholder="昵称/手机号/邮箱"
            @input="patternNickName"
          />
        </view>
        <view class="password u-f">
          <input type="password" @input="patternPwd" placeholder="请输入密码" />
          <text>忘记密码？</text>
        </view>
      </view>
    </view>
    <view v-if="type == '账号密码'">
      <view class="login-input">
        <view class="phone">
          <text>+86</text>
          <input
            type="number"
            placeholder="输入手机号码"
            @input="patternMobile"
            @focus="checkInput"
            :class="{
              active: mobilePhoneFocusStyle,
              'text-danger': !mobilePhoneStyle && mobilePhoneFocusStyle,
            }"
          />
        </view>
        <view class="veri-code">
          <input
            type="password"
            placeholder="请输入验证码"
            @input="patternCode"
          />
          <button
            :disabled="!mobilePhoneStyle"
            :class="{ btnactive: mobilePhoneStyle }"
            @tap="sendCode"
          >
            {{ code ? downTime + "s" : "获取验证码" }}
          </button>
        </view>
      </view>
    </view>

    <view class="loginBtn u-f-asb">
      <button :type="logintype" @click="login" :disabled="passwordStyle">
        登录
      </button>
    </view>
    <view class="u-f-dasb u-f-ac u-f-jc">
      <tip-login @toLogin="toLogin" :type="type"></tip-login>
      <view class="middle-line u-f-asb">
        <text>第三方登录</text>
      </view>
      <thirdLogin></thirdLogin>
      <view>注册即代表您同意《趣味用户协议》</view>
    </view>
  </view>
</template>

<script>
import thirdLogin from "../../components/common/third-login.vue";
import tipLogin from "../../components/common/tip-login.vue";

export default {
  components: { thirdLogin, tipLogin },
  data() {
    return {
      type: "验证码",
      mobilePhone: "",
      code: "",
      nickname: "",
      password: "",
      mobilePhoneStyle: false,
      mobilePhoneFocusStyle: false,
      loginStatus: false,
      logintype: "default",
      nicknameStyle: false,
      passwordStyle: false,
      code: false,
      downTime: 60,
    };
  },
  onLoad() {
    // console.log("info", uni.getStorageSync("userinfo"));
    // 如果检测到已经登录状态，那么就不显示登入页面
    if (uni.getStorageSync("userinfo")) {
      uni.switchTab({
        url: "/pages/home/home",
      });
    }
  },
  methods: {
    toLogin() {
      this.type == "验证码" ? (this.type = "账号密码") : (this.type = "验证码");
      if (this.type == "账号密码") {
        this.mobilePhone = "";
      }
    },
    // 输入数字实时监听
    patternMobile(e) {
      let mobilePattern = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/;
      let result = mobilePattern.test(e.detail.value);
      this.mobilePhone = e.detail.value;
      this.mobilePhoneStyle = result;
    },
    // 验证昵称输入
    patternNickName(e) {
      if (e.detail.value.length > 2) {
        this.nickname = e.detail.value;
        this.nicknameStyle = true;
      }
    },
    // 验证密码
    patternPwd(e) {
      if (e.detail.value.length > 8 && this.nicknameStyle) {
        this.password = e.detail.value;
        this.logintype = "primary";
        this.passwordStyle = false;
      } else {
        this.password = e.detail.value;
        this.logintype = "default";
        this.passwordStyle = true;
      }
    },
    patternCode(e) {
      let codePattern = /^\d{6}$/;
      let result = codePattern.test(e.detail.value);
      this.code = e.detail.value;
      if (result) {
        this.logintype = "primary";
        this.passwordStyle = false;
      } else {
        this.logintype = "default";
        this.passwordStyle = true;
      }
    },
    // 监听聚焦
    checkInput(e) {
      this.mobilePhoneFocusStyle = true;
    },
    // 倒计时
    countDownTime() {
      var sign = setInterval(() => {
        this.downTime = this.downTime - 1;
      }, 1000);
      setTimeout(() => {
        this.code = false;
        clearInterval(sign);
      }, 60000);
    },
    // 发送验证码
    sendCode() {
      this.code = true;
      this.mobilePhoneStyle = false;
      this.countDownTime();
      // return this.User.login({
      //   url: "/login/sendCode",
      //   data: {
      //     mobilePhone: this.mobilePhone,
      //   },
      // });
      uni.request({
        url: "http://localhost:3000/login/sendCode", //仅为示例，并非真实接口地址。
        data: {
          mobilePhone: this.mobilePhone,
        },
        method: "POST",
        header: {
          "content-type": "application/json", //自定义请求头信息
        },
        success: (res) => {
          if (res.statusCode == 200 && res.data.code == 1) {
            uni.showToast({
              title: "短信验证码发送成功",
              duration: 2000,
              icon: "none",
            });
          }
        },
      });
    },
    login() {
      if (this.type == "账号密码") {
        return this.User.login({
          url: "/login/phonelogin",
          data: {
            mobilePhone: this.mobilePhone,
            code: this.code,
          },
        });
        // uni.request({
        //   url: "http://localhost:3000/login/codelogin",
        //   data: {
        //     mobilePhone: this.mobilePhone,
        //     code: this.code,
        //   },
        //   method: "POST",
        //   header: {
        //     "content-type": "application/json",
        //   },

        //   success: (res) => {
        //     console.log(JSON.stringify(res, null, 4));
        //   },
        // });
      } else {
        return this.User.login({
          url: "/login/pwdlogin",
          data: {
            username: this.nickname,
            password: this.password,
          },
        });
        // uni.request({
        //   url: "http://localhost:3000/login/pwdlogin",
        //   data: { username: this.nickname, password: this.password },
        //   method: "POST",
        //   header: {
        //     "content-type": "application/json",
        //   },
        //   success: (res) => {
        //     console.log(JSON.stringify(res, null, 4));
        //   },
        // });
      }
    },
  },
};
</script>

<style scoped>
.topic-bg image {
  width: 100%;
  height: 100%;
}
view {
  margin-bottom: 25px;
}
.loginBtn button {
  width: 90%;
}
.middle-line {
  width: 50%;
  border-bottom: 1px solid #9c9c9c;
  position: relative;
}
.middle-line text {
  color: #9c9c9c;
  position: absolute;
  top: -10px;
  background: #ffffff;
  padding: 0 10px;
}
.login-input > view:last-child {
  position: relative;
  top: -10px;
}
.login-input > view > input {
  height: 50px;
  border-bottom: 1px solid #f7f7f7;
}
.password > input {
  flex: 4;
}
.password > text {
  flex: 1;
  border-bottom: 1px solid #f7f7f7;
  text-align: center;
  line-height: 50px;
}
.phone,
.veri-code {
  position: relative;
}
.phone > text {
  position: absolute;
  top: 10px;
  font-size: 18px;
}
.phone > input {
  padding-left: 40px;
}
.veri-code {
}
.veri-code > button {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 100px;
  height: 30px;
  color: #b1b1b1;
  border-radius: 5px;
  background: #f4f4f4;
  font-size: 12px;
  border: none;
  padding: 0;
  line-height: 30px;
}
.active {
  transition: 250ms;
  border-bottom: 1px solid #007fff !important;
}
.text-danger {
  transition: 250ms;
  border-bottom: 1px solid red !important;
}
.btnactive {
  transition: 250ms;
  background-color: #007fff !important;
  color: #ffffff !important;
}
</style>
